<template>
  <div class="home">
    <header class="tc ">
      <h1 class="title pr pr20 pl20 f35 cfff fn">
        <router-link class="img pa cfff" to="/upConfirmOrder">
          <i class="el-icon-arrow-left  f40 "></i>
        </router-link>
        优惠劵
      </h1>
    </header>
    <main class="p20">
      <section class="bcf7 mb20 f20 cfff">
        <ul class="section mb20" v-for="el in arr">
          <li class="flex jcsb mb30">
            <div>
              <p class="mb15">{{ el.name }}</p>
              <h2>{{ el.condition }}</h2>
            </div>
            <div>
              ￥<span class="fb" style="font-size: 70rem;">{{ el.card }}</span>
            </div>
          </li>
          <li class="line-dash cfff mb20"></li>
          <li class="flex jcsb">
            <p>有效期至:{{ el.time }}</p>
            <div>
              <a href="#" class="cfff">去使用
                <i class="el-icon-arrow-right  f20 "></i>
              </a>
            </div>
          </li>
        </ul>
      </section>
    </main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "仅限于XX加油站使用",
          condition: "满200元可用",
          card: 20,
          time: "2020.04.11——2023.05.11"
        },
        {
          name: "通用",
          condition: "满200元可用",
          card: 10,
          time: "2020.04.11——2023.05.11"
        },
        {
          name: "仅限于XX加油站使用",
          condition: "满200元可用",
          card: 20,
          time: "2020.04.11——2023.05.11"
        },
        {
          name: "通用",
          condition: "满200元可用",
          card: 10,
          time: "2020.04.11——2023.05.11"
        }
      ]
    }
  }
}
</script>
<style scoped>
.mb35 {
  margin-bottom: 35rem;
}

.asc {
  align-self: center;
}

.bcf7 {
  background-color: #f7f7f7;
}

.line {
  height: 1rem;
  background-color: #f7f7f7;
}

.line-dash {
  border: dashed 2rem;
}

/* .home{background-color: #f7f7f7;} */
/* 头部样式  ---需要可剪切 */
header .title {
  height: 145rem;
  line-height: 145rem;
}

header {
  height: 435rem;
  background-color: #3385fd;
}

header .img {
  width: auto;
  left: 20rem;
  top: 0;
}

main {
  margin-top: -310rem;
}

body {
  background-color: red !important;
}

/* 手机端必须加上这一句--体验感 */
main {
  margin-bottom: 120rem;
}

main section {
  padding: 40rem 30rem;
  border-radius: 20rem;
  box-sizing: border-box;
}

main ul {
  height: 225rem;
  background: url(../../../assets/img/wash-car-img/ellipse-orange.png) no-repeat;
  padding: 30rem 40rem;
  box-sizing: border-box;
  background-size: 100% 225rem;
}</style>